<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="ce-4.4.1/dist/jexcel.css" />
    <link rel="stylesheet" href="jsuites-3.9.9/dist/jsuites.css" />
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css" />

    <title>Document</title>
</head>

<body>
    <!--芯片信息界面  -->
    <div class="modal" id="importChipModal" aria-labelledby="staticBackdropLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">芯片信息</h4>
                </div>
                <div class="modal-body">
                    <div id="chipTable"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="commitData(1)">提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--芯片样品信息界面  -->
    <div class="modal" id="importChipSampleModal" aria-labelledby="staticBackdropLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <input type="text" id="num" />
                    <button class="btn btn-primary" onclick="insertRow()">添加</button>
                    <h4 class="modal-title">录入信息</h4>
                </div>
                <div class="modal-body">
                    <div id="chipSampleTable"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="uploadData()">提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    <button onclick="openImportChipDataModal()">芯片</button>
    <button onclick="openImportChipSampleDataModal()">样本</button>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="ce-4.4.1/dist/jexcel.js"></script>
    <script src="jsuites-3.9.9/dist/jsuites.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script>
        var chip;
        var chipSample;
        var source;
        function insertRow() {
            console.log(chipSample);
            if ($("#num").val() > $("#chipSampleTable .jexcel").find("tr").length - 1) {
                console.log($("#num").val());
                console.log($("#chipSampleTable .jexcel").find("tr").length - 1);
                chipSample.insertRow($("#num").val() - $("#chipSampleTable .jexcel").find("tr").length + 1);
            } else {
                for (let i = $("#chipSampleTable .jexcel").find("tr").length - 1; i > $("#num").val(); i--) {

                    chipSample.deleteRow($("#chipSampleTable .jexcel").find("tr").length, 1);
                }
                // chipSample.deleteRow($("#num").val() + 1, $("#chipSampleTable .jexcel").find("tr").length - 1);
            }
        }
        function deleteRow() {
            chipSample.deleteRow(7, 1);
        }
        function openImportChipDataModal() {
            if ($("#chipTable .jexcel").length == 0) {
                var data = [[]];
                $('#chipTable').jexcel({
                    data: data,
                    rowResize: true,
                    columnDrag: true,
                    columns: [
                        {
                            type: 'text',
                            title: '芯片编号',
                            width: '100',
                        },
                        {
                            type: 'text',
                            title: '上机浓度',
                            width: '100',
                        },
                        {
                            type: 'calendar',
                            title: '上机时间',
                            options: { format: 'YYYY-MM-dd' },
                            width: '100',
                        },
                    ],
                });
            }
            $("#importChipModal").modal("show");
        }

        function openImportChipSampleDataModal() {
            // var data = [['', '1'], ['', '2'], ['', '3'], ['', '4'], ['', '5'], ['', '6'], ['', '7'], ['', '8']];
            source = changeSource(['Apples', 'Bananas', 'Carrots', 'Oranges', 'Cheese', 'Pears']);
            if ($("#chipSampleTable .jexcel").length == 0) {
                var data = [[]];
                chipSample = $('#chipSampleTable').jexcel({
                    data: data,
                    rowResize: true,
                    columnDrag: true,
                    columns: [
                        {
                            type: 'dropdown',
                            title: '芯片编号',
                            source: source,
                            autocomplete: true,
                            width: '100',
                        },
                        {
                            type: 'text',
                            title: '样品编号',
                            width: '100',
                        }, {
                            type: 'text',
                            title: 'index编号',
                            width: '100',
                        }, {
                            type: 'text',
                            title: '文库名称',
                            width: '100',
                        }, {
                            type: 'text',
                            title: '混合体积',
                            width: '100',
                        },
                        {
                            type: 'text',
                            title: '试剂ID',
                            width: '100',
                        },
                    ],
                });
            }
            $("#importChipSampleModal").modal("show");
        }
        function changeSource(data) {
            return data;
        }
        function uploadData() {
            var tblObj = new Array();//最终要取得的json对象
            //取得Excel每个单元格内容
            $("#chipSampleTable .jexcel").find("tr").each(function (i, v) {
                var tdArray = $(this).children();
                if (i == 0)
                    return true;//跳出表头，进行下次循环
                var p = new Object();
                p.No = $.trim(tdArray.eq(0).html());
                p.name = $.trim(tdArray.eq(1).html());
                p.year = $.trim(tdArray.eq(2).html());
                p.Score = $.trim(tdArray.eq(3).html());
                tblObj.push(p);
            });
            console.log(JSON.stringify(tblObj));
        }

        // $('#my2').html(JSON.stringify(tblObj));
    </script>
</body>

</html>